<template>
  <div class="container">
    <uni-nav-bar class="nav-bar" title="立即提现" statusBar="true" leftIcon="left" @clickLeft="back" :border="false"
      backgroundColor="#ffffff"></uni-nav-bar>
    <!-- 提现账户 -->
    <div class="no-account" v-if="!userInfo.zfb_name">
      <div class="part-container">
        <image class="alipay-icon" src="@/static/icons/mine/alipay.svg"></image>
        <span class="part-txt">提现到支付宝</span>
        <span class="bind-tip" @click="bindZfb">未绑定支付宝，点击绑定</span>
      </div>
    </div>
    <div class="withdraw-account" v-else>
      <image class="withdraw-account-icon" src="@/static/icons/mine/alipay.svg"></image>
      <text class="withdraw-account-name">{{ handlerZfbName }}</text>
      <text class="withdraw-account-number">{{ handlerZfbAccount }}</text>
    </div>
    <!-- 提现金额 -->
    <div class="withdraw-amount">
      <text class="withdraw-amount-title">提现金额</text>
      <!-- 输入区域 -->
      <div class="withdraw-amount-input">
        <text class="withdraw-amount-input-prefix">¥</text>
        <input class="withdraw-amount-input-input" type="digit" placeholder="请输入提现金额" v-model="takeMoney"/>
        <span class="withdraw-amount-input-all" @click="takeAll">全部</span>
      </div>
      <!-- 分割线 -->
      <div class="withdraw-amount-line"></div>
      <!-- 提现说明 -->
      <text class="withdraw-amount-desc">提示：提现金额需大于1元</text>
    </div>
    <!-- 「提交」按钮 -->
    <button class="submit-btn" @click="takeOutHandler">提交</button>
    <bindAlipay v-if="isShowBindDialog" @close="closeHandler"/>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
import { back, navigateTo } from '@/utils/navigate';
import { useUser } from "@/stores/user-store"
import { storeToRefs } from 'pinia';
import { showToast } from '@/utils/tools';
import { takeOutByAlipay } from "@/api/api-user";
import bindAlipay from "@/components/bind-Alipay.vue"

const userStore = useUser();
const { userInfo } = storeToRefs(userStore);

/** 判定是否绑定了支付宝 */
const isShowBindDialog = ref(false);
const isBindAlipay = computed(() => userInfo.value.zfb_account ? true : false)
/** 绑定支付宝弹窗 */
const bindZfb = () => {
  if (!isBindAlipay.value) {
    isShowBindDialog.value = true;
  } else {
    isShowBindDialog.value = false;
  }
}
// 弹窗关闭逻辑
const closeHandler = () => {
  isShowBindDialog.value = false;
}

/** 处理用户支付宝姓名的计算属性 */
const handlerZfbName = computed(() => {
  if (!userInfo.value.zfb_name) {
    return ''
  }
  const nameArr = userInfo.value.zfb_name.split("");
  // 填充 *
  nameArr.fill('*', 1)
  return nameArr.join("")
})

/** 处理用户支付宝账号的计算属性 */
const handlerZfbAccount = computed(() => {
  if (!userInfo.value.zfb_account) {
    return ''
  }
  const accountArr = userInfo.value.zfb_account.split("");
  // 填充 *
  accountArr.fill('*', 3, 7)
  return accountArr.join("")
})

/**
 * 点击立即提现，判断是否绑定支付宝，未绑定则文字提示还未绑定支付宝，并弹出绑定弹窗
 */
 const takeMoney = ref('');
const { updateUserMoney } = userStore;
const takeOutHandler = async () => {
  if (!isBindAlipay.value) {
    showToast('当前账户还未绑定支付宝~')
    setTimeout(() => {
      isShowBindDialog.value = true;
    }, 1500);
    return;
  }
  // 判断提现金额是否合法
  if (!takeMoney.value) {
    showToast('请输入提现金额~');
    return;
  }
  if (Number(takeMoney.value) > Number(userInfo.value.money_remain)) {
    showToast('账户余额不足~');
    return;
  }
  if (Number(takeMoney.value) < 1) {
    showToast('提现金额不能少于1元~');
    return;
  }

  // 调用提现接口
  const res: any = await takeOutByAlipay(takeMoney.value);
  const target = res.data.data;
  if (target && String(target.result_code) === 'SUCCESS') {
    // 跳转至提现成功页面
    navigateTo('withdraw-success')
    // 更新store中的账户余额
    updateUserMoney(takeMoney.value)
  } else {
    showToast('提现失败，请稍后重试');
    return;
  }
}
// 全部提现
const takeAll = () => {
  takeMoney.value = String(Number(userInfo.value.money_remain).toFixed(2))
}


</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: #f2f8f3;

  display: grid;
  grid-template:
    'nav-bar' auto
    '.' 16px
    'withdraw-account' 17.4359vw
    '.' 16px
    'withdraw-amount' 39.2308vw
    'submit-btn' 1fr
    / 1fr;

  .nav-bar {
    grid-area: nav-bar;
  }

  // 提现账户
  .no-account {
    width: 100%;
    margin-top: 31rpx;
    padding: 0 29rpx;
    box-sizing: border-box;
    .part-container {
      width: 100%;
      height: 131rpx;
      padding: 0 38rpx;
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 38rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      
      .alipay-icon {
        width: 77rpx;
        height: 77rpx;
        margin-right: 19rpx;
      }

      .part-txt {
        flex: 1;
        text-align: left;
        font-size: 17px;
      }
      
      .bind-tip {
        font-size: 12px;
        text-decoration: underline;
        color: rgba(0, 0, 0, .4);
      }
    }
  }
  .withdraw-account {
    grid-area: withdraw-account;
    justify-self: center;

    width: 92.3077vw;
    height: 17.4359vw;
    background: #ffffff;
    border-radius: 20px;

    display: grid;
    grid-template:
      'withdraw-account-icon withdraw-account-name ' 1fr
      'withdraw-account-icon withdraw-account-number' 1fr
      / 10.2564vw 1fr;
    column-gap: 10px;
    padding: 14px 20px;

    .withdraw-account-icon {
      grid-area: withdraw-account-icon;
      align-self: center;
      justify-self: center;

      width: 40px;
      height: 40px;
    }

    .withdraw-account-name {
      grid-area: withdraw-account-name;
      align-self: center;

      font-size: 15px;
      font-weight: bold;
      color: #333333;
    }

    .withdraw-account-number {
      grid-area: withdraw-account-number;
      align-self: center;
      justify-self: start;

      font-size: 13px;
      color: #8d8d8d;
    }
  }

  // 提现金额
  .withdraw-amount {
    grid-area: withdraw-amount;
    justify-self: center;

    width: 92.3077vw;
    height: 39.2308vw;
    background: #ffffff;
    border-radius: 20px;

    display: flex;
    flex-direction: column;
    padding: 15px 20px;

    .withdraw-amount-title {
      font-size: 3.8462vw;
      font-weight: bold;
      color: #333333;
    }

    // 输入区域
    .withdraw-amount-input {
      margin-top: 10px;

      display: flex;
      align-items: center;

      .withdraw-amount-input-prefix {
        font-size: 8.2051vw;
        font-weight: bold;
        color: #333333;
      }

      .withdraw-amount-input-input {
        margin-left: 19rpx;
        margin-right: 38rpx;
        font-size: 15px;
        flex: 1;
      }

      .withdraw-amount-input-all {
        margin-left: auto;

        font-size: 15px;
        color: #FE4758
      }
    }

    // 分割线
    .withdraw-amount-line {
      margin-top: 5px;

      width: 82.0513vw;
      height: 1px;
      background: #e0e0e0;
    }

    // 提现说明
    .withdraw-amount-desc {
      margin-top: 15px;
      font-size: 3.8462vw;
      color: rgba(0, 0, 0, .7);
    }
  }

  // 「提交」按钮
  .submit-btn {
    grid-area: submit-btn;
    align-self: flex-end;
    justify-self: center;
    margin-bottom: 50px;

    width: 342px;
    height: 42px;
    background: #17ce92;
    border-radius: 4px;

    font-size: 4.1026vw;
    font-weight: bold;
    color: #fff;
  }
}
</style>
